<script lang="ts">
  import Target from "../../../components/Target/Target.svelte";
  import { TargetType } from "../../../components/Target/type";
  import { onMount } from "svelte";
  import { targets } from "../stores";

  onMount(async () => {
    const urlParams = new URLSearchParams(window.location.search);
    const type = urlParams.get("type") || 1;
    targets.get(type);
  });
</script>

<div class="h-full flex flex-1 items-center h-full gap-4">
  <div class="basis-1/4">
    <Target label="在线数量" value={$targets.normal} type={TargetType.online} />
  </div>
  <div class="basis-1/4">
    <Target
      label="预警数量"
      value={$targets.warning}
      type={TargetType.warning}
    />
  </div>
  <div class="basis-1/4">
    <Target label="故障数量" value={$targets.error} type={TargetType.error} />
  </div>
  <div class="basis-1/4">
    <Target
      label="离线数量"
      value={$targets.offline}
      type={TargetType.offline}
    />
  </div>
</div>
